<template>
  <div class="app-container edit-dialog-box">
    <div class="form-box jsp-scroller" style="height:630px;overflow-y:scroll">
      <el-form ref="form" :model="form" label-width="130px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane :label="$t('common.edit_info')" class="form-tabs-tab-pane">
            <el-collapse v-model="activeForm">
              <el-collapse-item :title="$t('common.basic_info')" name="1">
                <!-- 菜单类型 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item prop="type">
                      <span slot="label">
                        {{ $t('menu.type') }}
                      </span>
                      <el-radio-group v-model="form.type" :disabled="editDetail.id>0" @change="handleTypeChange">
                        <el-radio v-for="item in dictionaryService.getItems('menuTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 上级菜单 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.parent_name')"
                      prop="menu_parent_ids"
                      :rules="{ required: (form.type==2), message: $t('menu.parent_name_tips'), trigger: ['blur','change'] }"
                    >
                      <el-cascader
                        v-model="form.menu_parent_ids"
                        :options="parentMenuData"
                        :props="{ checkStrictly: true, children: 'children', label: 'name', value: 'id'}"
                        :placeholder="$t('menu.parent_name_tips')"
                        filterable
                        clearable
                        @change="handleParentChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item prop="name">
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.name_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.name') }}
                      </span>
                      <el-input
                        v-model="form.name"
                        :placeholder="$t('menu.name_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单英文名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('menu.enname')" prop="enname">
                      <el-input
                        v-model="form.enname"
                        :placeholder="$t('menu.enname_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单图标 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_icon')"
                      prop="route_icon"
                    >
                      <jsp-icon-picker v-model="form.route_icon" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单描述 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.description')"
                      prop="description"
                    >
                      <el-input
                        v-model="form.description"
                        type="textarea"
                        :placeholder="$t('menu.description_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 排序 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('common.sort')"
                      prop="sort"
                    >
                      <el-input-number v-model="form.sort" controls-position="right" :min="1" :placeholder="$t('common.sort_tips')" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 绑定栏目 -->
                <el-row v-show="form.type==1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item prop="relation_cate" :label="$t('menu.relation_cate')">
                      <el-radio-group v-model="form.relation_cate">
                        <el-radio v-for="item in dictionaryService.getItems('boolTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 显示状态 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item prop="status">
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.status_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.status') }}
                      </span>
                      <el-radio-group v-model="form.status" :disabled="form.type==3">
                        <el-radio v-for="item in dictionaryService.getItems('showStatusVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-collapse-item>
              <el-collapse-item v-show="[1,2,3].indexOf(form.type) > -1" :title="$t('menu.route_settings')" name="2">
                <!-- 提示 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-alert
                      :title="$t('menu.route_settings_tips')"
                      type="warning"
                      class="route_settings_tips"
                    />
                  </el-col>
                </el-row>

                <!-- 路由名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_name"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_name_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_name') }}
                      </span>
                      <el-input
                        v-model="form.route_name"
                        :placeholder="$t('menu.route_name_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 路由地址 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_path"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_path_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_path') }}
                      </span>
                      <el-input
                        v-model="form.route_path"
                        :placeholder="$t('menu.route_path_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 页面组件路径 -->
                <el-row v-show="[2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_component"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_component_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_component') }}
                      </span>

                      <el-input
                        v-model="form.route_component"
                        :placeholder="$t('menu.route_component_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 重定向路由地址 -->
                <el-row v-show="[1,2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_redirect"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_redirect_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_redirect') }}
                      </span>
                      <el-input
                        v-model="form.route_redirect"
                        :placeholder="$t('menu.route_redirect_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 高亮路由地址 -->
                <el-row v-show="[2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_activeMenu"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_activeMenu_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_activeMenu') }}
                      </span>
                      <el-input
                        v-model="form.route_activeMenu"
                        :placeholder="$t('menu.route_activeMenu_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 总显示根路由 -->
                <el-row v-show="[1,2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_alwaysShow"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_alwaysShow_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_alwaysShow') }}
                      </span>
                      <el-radio-group v-model="form.route_alwaysShow">
                        <el-radio v-for="item in dictionaryService.getItems('boolTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 固定在标签栏上 -->
                <el-row v-show="[2,3].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      prop="route_affix"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_affix_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_affix') }}
                      </span>
                      <el-radio-group v-model="form.route_affix">
                        <el-radio v-for="item in dictionaryService.getItems('boolTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 显示在面包屑 -->
                <el-row v-show="[1,2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_breadcrumb')"
                      prop="route_breadcrumb"
                    >
                      <el-radio-group v-model="form.route_breadcrumb">
                        <el-radio v-for="item in dictionaryService.getItems('boolTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 转菜单树 -->
                <el-row v-show="[1,2].indexOf(form.type) > -1" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_isTree')"
                      prop="route_isTree"
                    >
                      <span slot="label">
                        <el-tooltip class="item" effect="dark" placement="right">
                          <div slot="content" v-html="$t('menu.route_isTree_tips')" />
                          <i class="awesome-icon fas fa-question-circle" />
                        </el-tooltip>
                        {{ $t('menu.route_isTree') }}
                      </span>
                      <el-radio-group v-model="form.route_isTree">
                        <el-radio v-for="item in dictionaryService.getItems('boolTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item v-show="[1,2].indexOf(form.type) > -1" :title="$t('menu.api_settings')" name="3">
                <!-- 权限 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('menu.permission_ids')" prop="permission_ids">
                      <el-input
                        v-model="permissionSearchVal"
                        :placeholder="$t('menu.permissionSearchVal_tips')"
                        clearable
                      />
                      <el-tree
                        ref="permissionTree"
                        class="permissionTree jsp-scroller"
                        :data="permissionList"
                        :props="{ children: 'children', label: 'name' }"
                        show-checkbox
                        node-key="id"
                        :empty-text="permissionList.length>0?$t('common.loading'):$t('common.empty')"
                        :element-loading-text="$t('common.loading')"
                        :default-checked-keys="form.permission_ids"
                        :default-expand-all="false"
                        :filter-node-method="handlePermissionFilter"
                        @check-change="handlePermissionCheckChange"
                      >
                        <span slot-scope="{ node, data }" class="custom-tree-node">
                          <span>{{ data.name }} {{ data.priv?data.priv:'' }}</span>
                        </span>
                      </el-tree>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>

      </el-form>
    </div>
  </div>
</template>

<script>
import JspIconPicker from '@/components/JspIconPicker'
import { show, update, store, getParentTreeConfig } from '@/api/menu'
import { getMenuPermissionTreeConfig } from '@/api/permission'
import { loadingStart } from '@/utils/loading-service'

// export
export default {
  name: 'MenuEditDialog',
  components: {
    JspIconPicker
  },
  props: {
    editDetail: { // 详情
      type: Object,
      default: function() {
        return {
          id: 0,
          parent_id: 0
        }
      }
    }
  },
  data() {
    return {
      activeForm: ['1', '2', '3'],
      permissionSearchVal: '',
      form: {
        type: 1,
        parent_id: 0,
        menu_parent_ids: [],
        name: '',
        enname: '',
        description: '',
        relation_cate: 0,
        sort: 999,
        status: 1,
        // 路由配置字段
        route_icon: '',
        route_name: '',
        route_path: '',
        route_component: '',
        route_redirect: '',
        route_activeMenu: '',
        route_alwaysShow: 0,
        route_affix: 0,
        route_breadcrumb: 1,
        route_isTree: 0,
        // 接口配置
        permission_ids: []
      },
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        name: [
          {
            required: true,
            message: this.$t('menu.name_tips'),
            trigger: 'blur'
          },
          { min: 2, max: 50, message: this.$t('menu.name_length_tips'), trigger: 'blur' }
        ],
        status: [
          { required: true, message: this.$t('menu.status_tips'), trigger: 'blur' }
        ],
        route_name: [
          { required: true, message: this.$t('menu.short_route_name_tips'), trigger: 'blur' },
          { min: 2, max: 50, message: this.$t('menu.short_route_name_length_tips'), trigger: 'blur' }
        ],
        route_path: [
          { required: true, message: this.$t('menu.short_route_path_tips'), trigger: 'blur' }
        ]
      },
      // 上级菜单
      parentMenuData: [],
      // 权限列表
      permissionList: []
    }
  },
  computed: {},
  watch: {
    permissionSearchVal(val) {
      this.$refs.permissionTree.filter(val)
    }
  },
  created() {
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const loading = loadingStart({ querySelector: '.edit-dialog-box' })
      const { id, parent_id } = this.editDetail
      if (id > 0) {
        const response = await show(id).catch(() => {
          this.$emit('error', null)
        })
        if (response === undefined) return
        for (const key in response.data) {
          if (key in this.form) {
            this.form[key] = response.data[key] !== undefined ? response.data[key] : this.form[key]
          }
        }
      }

      // 上级菜单
      await getParentTreeConfig((id === 0 && parent_id > 0 ? parent_id : id)).then((response) => {
        const { items, parent_ids } = response.data
        this.parentMenuData = items
        this.form.menu_parent_ids = parent_ids
      })

      if (id === 0 && parent_id > 0) {
        this.form.menu_parent_ids.push(parent_id)
        this.form.parent_id = parent_id
      }

      // 菜单权限配置
      await getMenuPermissionTreeConfig().then((response) => {
        this.permissionList = response.data.items
      })

      this.$nextTick(() => {
        this.$refs.permissionTree !== undefined && this.$refs.permissionTree.setCheckedKeys(this.form.permission_ids)
      })

      loading.close()
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          const newForm = JSON.parse(JSON.stringify(this.form))
          delete newForm.menu_parent_ids
          if (this.editDetail.id) {
            await update(this.editDetail.id, newForm).then((response) => {
              this.$emit('success', response)
            }).catch(() => {
              this.$emit('error', null)
            })
          } else {
            await store(newForm).then((response) => {
              this.$emit('success', response)
            }).catch(() => {
              this.$emit('error', null)
            })
          }
        } else {
          this.$emit('error', this.$t('common.pleaseFillRequired'))
        }
      })
    },
    // 选择上级菜单
    handleParentChange(e) {
      this.form.parent_id = e && e.length > 0 ? e[e.length - 1] : 0
    },
    handleTypeChange(value) {
      if (value === 3) this.form.status = 0
      value !== 2 && this.$refs['form'].clearValidate(['menu_parent_ids'])
    },
    // 权限选择
    handlePermissionCheckChange(data, checked, indeterminate) {
      const resultChecked = this.$refs.permissionTree.getCheckedNodes()
      this.form.permission_ids = resultChecked.map((e) => {
        return e.id
      })
    },
    handlePermissionFilter(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped lang="scss">
.fa-question-circle {
  margin-left: 10px;
  cursor: pointer;
}
.route_settings_tips {
  margin-bottom: 22px;
}
.el-collapse {
  border-bottom: 0;
}
.permissionTree {
  height: 210px;
  overflow-y: auto;
}
</style>
